<template>
  <div class="container">
    <div class="coupon-show pad-b-5">
      <div class="coupon-type type-1">
        <div class="flex v-align-t">
          <label></label>
          <div class="text-align-l flex-item pad-r-20">
            <h2>新客进店有礼</h2>
            <p>新客进店，赠送专享优惠券</p>
          </div> 
        </div>
        <div class="border-top"></div>
        <el-button @click="addAction('10')" type="primary">立即创建</el-button>
      </div>
      <div class="coupon-type type-2">
        <div class="flex v-align-t">
          <label></label>
          <div class="text-align-l flex-item pad-r-20">
            <h2>购买有礼</h2>
            <p>符合待定的消费条件即赠送优惠券</p>
          </div> 
        </div>
        <div class="border-top"></div>
        <el-button @click="addAction('20')" type="primary">立即创建</el-button>
      </div>
      <div class="coupon-type type-3">
        <div class="flex v-align-t">
          <label></label>
          <div class="text-align-l flex-item pad-r-20">
            <h2>定向发放</h2>
            <p>特定时间向特定人群发放优惠券</p>
          </div> 
        </div>
        <div class="border-top"></div>
        <el-button @click="addAction('30')" type="primary">立即创建</el-button>
      </div>
    </div>
    <div class="pad-l-20 pad-r-20 bg-color-white">
      <div  class="tab-style-default">
        <el-tabs v-model="action.actionType" @tab-click="typeClick">
          <el-tab-pane :label="labels[10]" name="10"> </el-tab-pane>
          <el-tab-pane :label="labels[20]" name="20"> </el-tab-pane>
          <el-tab-pane :label="labels[30]" name="30"> </el-tab-pane>
        </el-tabs>
      </div>
      <!--顶部搜索 -->
      <div class="top-operate">
        <div>
          <div>
            <el-input style="width: 200px;" v-model="action.textValue" placeholder="活动名称"></el-input>
            <el-select class="select-class mar-l-10" v-model="action.actionStatus" placeholder="活动状态">
              <el-option label="所有" value=" "></el-option>
              <el-option v-for="(val, key) in dict.actionStatus" :key="key" :label="val" :value="key"/>
            </el-select>
            <el-select class="select-class mar-l-15" v-model="action.timeCol">
              <el-option label="创建时间" value="createTime"></el-option>
              <el-option label="活动开始时间" value="actionStartTime"></el-option>
              <el-option label="活动结束时间" value="actionEndTime"></el-option>
            </el-select>
            <el-date-picker
              v-model="action.timeValue"
              type="daterange"
              range-separator="至"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
            <el-button type="primary" @click="handleSearch" class="mar-l-10">查询</el-button>
            <el-button plain="" @click="resetSearch" style="margin-left: 10px;">重置</el-button>
          </div>
        </div>
      </div>
      <!-- 内容列表 -->
      <div class="table-container">
        <el-table ref="multipleTable" :data="actionList" v-loading="listLoading" element-loading-text="加载中" style="width: 100%" header-cell-class-name="default-header"
          row-class-name="default-row">
          <el-table-column width="240px" label="活动名称" prop="actionName" fixed="left"></el-table-column>
          <el-table-column width="220px" label="活动时间">
            <template slot-scope="scope">
              <span>开始：{{scope.row.actionStartTime}}</span><br/>
              <span>结束：{{scope.row.actionEndTime}}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="action.actionType == 20" width="200px" label="发放条件" prop="buyType">
            <template slot-scope="scope">
              <div v-if="scope.row.buyType" class="font-14">
                <div style="font-size: 14px;" v-if="scope.row.fullAmount">{{dict.buyType[scope.row.buyType].replace('x', scope.row.fullAmount)}}</div>
                <div style="font-size: 14px;" v-else>{{dict.buyType[scope.row.buyType]}}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column v-if="action.actionType == 20" width="200px" label="发放限制"  prop="usedFlag">
            <template slot-scope="scope">
              <div v-if="scope.row.usedFlag" class="font-14">
                <div style="font-size: 14px;">{{dict.usedFlag[scope.row.usedFlag]}}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column v-if="action.actionType == 30" width="220px" label="发放人群" prop="customerType">
            <template slot-scope="scope">
              <div v-if="scope.row.customerType" class="font-14">
                <div style="font-size: 14px;">{{dict.customerType[scope.row.customerType]}}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column v-if="action.actionType == 30" width="200px" label="发放方式" prop="releaseType">
            <template slot-scope="scope">
              <div v-if="scope.row.releaseType" class="font-14">
                <div style="font-size: 14px;">{{dict.releaseType[scope.row.releaseType]}}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column v-if="action.actionType == 30" width="200px" label="发放次数" prop="releaseTimes">
            <template slot-scope="scope">
              <div v-if="scope.row.releaseType == 1 && (scope.row.releaseTimes == 1 || scope.row.releaseTimes == 2 || scope.row.releaseTimes == 3)" class="font-14 pad-l-10">
                <div style="font-size: 14px;">{{scope.row.releaseTimesNum}}</div>
              </div>
              <div v-if="scope.row.releaseType == 1 && scope.row.releaseTimes == 4" class="font-14 pad-l-10">
                <div>手动发放</div>
                <div>（已发放{{scope.row.releaseTimesNum}}次）</div>
              </div>
              <div v-if="scope.row.releaseType == 2">每人限领{{scope.row.collectTimes}}次</div>
            </template>
          </el-table-column>
          <el-table-column width="150px" label="状态" prop="actionStatus">
            <template slot-scope="scope">
              <div style="font-size: 14px;">{{dict.actionStatus[scope.row.actionStatus]}}</div>
            </template>
          </el-table-column>
          <el-table-column width="200px" label="创建时间">
            <template slot-scope="scope">
              {{scope.row.createTime}}
            </template>
          </el-table-column>
          <el-table-column min-width="140px" align="right" label="操作" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" size="medium" @click="editAction(scope.row)" v-if="scope.row.actionStatus == 0">编辑</el-button>
              <el-button type="text" size="medium" @click="viewAction(scope.row)" v-if="scope.row.actionStatus != 0">查看详情</el-button>
              <el-button type="text" size="medium" plain @click="publishAction(scope.row)" v-if="scope.row.actionStatus == 0">发布</el-button>
              <el-button type="text" size="medium" plain @click="sendCoupon(scope.row)" v-if="scope.row.releaseType == 1 && scope.row.releaseTimes == 4 && scope.row.actionStatus == 2">发放</el-button>
              <el-button type="text" size="medium" @click="endAction(scope.row)" v-if="scope.row.actionStatus == 1 || scope.row.actionStatus == 2">结束</el-button>
              <el-button type="text" size="medium" @click="deleteAction(scope.row)" v-if="scope.row.actionStatus == 0">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 列表分页 -->
      <div class="pagination mar-b-0 pad-b-20">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="searchListQuery.currentPage"
          :page-sizes="[10, 20, 50, 100]" :page-size="searchListQuery.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.container{
  padding: 26px 43px 0px 21px;
  background: #FAFAFA;
  min-height: 100%;
}
.tabs-bar{
  /deep/ .el-tabs__item{
    font-size: 16px;
  }
}
  .coupon-show{
    &:after{
      content: '';
      display: block;
      clear: both;
    }
    .coupon-type{
      background: white;
      float: left;
      text-align: center;
      border-radius: 8px;
      width: 300px;
      min-height: 150px;
      box-sizing: border-box;
      padding: 13px 0 0 0;
      margin-bottom: 15px;
      box-shadow: 0px 2px 14px 0px rgba(154, 154, 154, 0.18);
      overflow: hidden;
      label{
        display: inline-block;
        width: 70px;
        height: 70px;
        background:url('../../../assets/images/coupon-action-icon.png') no-repeat left top;
        background-size: 218px 70px;
        background-position: 0 0;
        margin: 0 12px 0 20px;
      }
      /deep/ .el-button{
        padding: 8px 26px;
      }
      h2{
        margin: 7px 0 8px 0;
        padding: 0;
        font-size: 18px;
        color: #333;
        font-weight: normal;       
      }
      .text-align-l{
        height: 80px;
      }
      p{
        margin: 0;
        padding: 0;
        font-size: 14px;
        line-height: 1.3;
        color: #666;
        span{
          display: inline-block;
          position: relative;
          min-height: 50px;
          width: 190px;
          text-align: left;
          margin-left: 16px;
        }
        i{
          position: absolute;
          left: 32px;
          top: 24px;
          width: 225px;
          font-style: normal;
        }
      }
      .border-top{
        border-top: #e5e5e5 1px dashed;
        margin: 6px 0 8px;
      }
      &.type-1{
        margin-right: 30px;        
      }
      &.type-2{
        margin-right: 30px;
        label{
          background-position: -74px 0px!important;
        }
        /deep/ .el-button--primary{
          background: #fc5a5a;
          border-color: #fc5a5a;
        }
        /deep/ .el-button--primary:hover, /deep/ .el-button--primary:focus{
          background: #fd7b7b;
          border-color: #fd7b7b;
        }
      }
      &.type-3{
        label{
          background-position: -148px 0px!important;
        }
        /deep/ .el-button--primary{
          background: #efbc51;
          border-color: #efbc51;
        }
        /deep/ .el-button--primary:hover, /deep/ .el-button--primary:focus{
          background: #f2c974;
          border-color: #f2c974;
        }
      }
    }
    @media screen and (max-width: 1315px) {
      .coupon-type{
        width: 280px!important;
        // p{
        //   width: 170px;
        // }
      }
    }
    @media screen and (max-width: 1200px) {
      .coupon-type{
        width: 250px!important;
        // p{
        //   width: 150px;
        // }
      }      
    }
    @media screen and (max-width: 1145px) {
      .coupon-type{
        width: 240px!important;
        // p{
        //   width: 130px;
        // }
      }
    }
    @media screen and (max-width: 1070px) {
      .coupon-type{
        width: 230px!important;
        // p{
        //   width: 110px;
        // }
      }
    }
  }
  .select-class {
    margin-right: -5px;
    width: 139px;
  }
</style>

<script>
  import { pageAction, statAction, deleteAction, publishAction, sendCoupon, endAction } from '@/api/coupon/action'

  export default {
    data() {
      return {
        total: 0,
        listLoading: false,
        searchListQuery: {},
        defaultQuery: {
          enterpriseId: this.getEnterpriseId(),
          actionName: '',
          actionType: '',
          actionStatus: '0',
          currentPage: 1,
          size: 10
        },
        action: {
          actionType: '10',
          textCol: 'actionName',
          textValue: '',
          timeCol: 'createTime',
          timeValue: []
        },
        dict: {
          actionStatus: {},
          buyType: {},
          usedFlag: {},
          customerType: {},
          releaseType: {},
          actionType: {}
        },
        actionList: [],
        labels: {
          '10': '新客进店有礼(0)',
          '20': '购买有礼(0)',
          '30': '定向发放(0)'
        },
        actionStatus: ''
      }
    },
    // 初始化页面
    created() {
      this.searchListQuery = { ...this.defaultQuery }
      const actionStatus = this.getCurrentPage().query.actionStatus
      const actionType = this.getCurrentPage().query.actionType
      if (actionStatus) {
        this.action.actionStatus = actionStatus
      }
      if (actionType) {
        this.action.actionType = actionType
      }
      this.init()
    },
    filters: {
      dateFilter(e) {
        return e
      }
    },
    mounted() {
    },
    methods: {
      // 更改当前页数
      handleCurrentChange(val) {
        this.searchListQuery.currentPage = val
        this.init()
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.searchListQuery.size = val
        this.init()
      },
      setSearchListQuery() {
        // 搜索状态
        const currentPage = this.searchListQuery.currentPage
        const size = this.searchListQuery.size
        this.searchListQuery = { ... this.defaultQuery }
        this.searchListQuery.enterpriseId = this.getEnterpriseId()
        this.searchListQuery.currentPage = currentPage
        this.searchListQuery.page = currentPage
        this.searchListQuery.size = size
        switch (this.action.actionStatus * 1) {
          default:
            this.searchListQuery.actionStatus = this.action.actionStatus
            break
          case 100:
            this.searchListQuery.actionStatus = ''
            if (this.actionStatus) {
              this.searchListQuery.actionStatus = this.actionStatus
            }
            break
        }
        this.searchListQuery[this.action.textCol] = this.action.textValue
        this.searchListQuery.actionType = this.action.actionType
        this.searchListQuery.dateColumn = this.action.timeCol
        if (this.action.timeValue && this.action.timeValue.length > 0) {
          this.searchListQuery.startDate = this.action.timeValue[0]
          this.searchListQuery.endDate = this.action.timeValue[1] || ''
        } else {
          this.searchListQuery.startDate = ''
          this.searchListQuery.endDate = ''
        }
      },
      init() {
        this.setSearchListQuery()
        this.listLoading = true
        statAction({ enterpriseId: this.getEnterpriseId() }).then(response => {
          if (response.isError) return
          this.labels[10] = '新客进店有礼(' + response.data[10] + ')'
          this.labels[20] = '购买有礼(' + response.data[20] + ')'
          this.labels[30] = '定向发放(' + response.data[30] + ')'
        })
        pageAction(this.searchListQuery).then(response => {
          if (response.isError) return
          this.total = response.data.total
          this.actionList = response.data.records
          this.actionList.forEach(action => {
            action.usedFlag = action.usedFlag.toString()
          })
          Object.assign(this.dict, response.data.dict)
          this.listLoading = false
        })
      },
      typeClick() {
        this.searchListQuery.currentPage = 1
        this.init()
      },
      showDetail(row) {
      },
      handleSearch() {
        this.searchListQuery.currentPage = 1
        this.init()
      },
      resetSearch() {
        this.searchListQuery = { ... this.defaultQuery }
        this.action = {
          textCol: 'actionName',
          textValue: '',
          timeCol: 'createTime',
          timeValue: [],
          orderType: '',
          actionType: this.action.actionType,
          actionStatus: ''
        }
        this.init()
      },
      addAction(actionType) {
        this.$router.push({ path: '/sell-promotion/coupon/action/detail', query: { actionType: actionType, editFlag: '1' }})
      },
      editAction(action) {
        this.$router.push({ path: '/sell-promotion/coupon/action/detail', query: { actionId: action.actionId, actionType: action.actionType, editFlag: '1' }})
      },
      viewAction(action) {
        this.$router.push({ path: '/sell-promotion/coupon/action/detail', query: { actionId: action.actionId, actionType: action.actionType, editFlag: '0' }})
      },
      publishAction(action) {
        publishAction(action.actionId).then(response => {
          if (response.isError) return
          this.$message({
            message: '发布成功！',
            type: 'success'
          })
          this.init()
        })
      },
      sendCoupon(action) {
        sendCoupon(action.actionId).then(response => {
          if (response.isError) return
          this.$message({
            message: '发放成功！',
            type: 'success'
          })
          this.init()
        })
      },
      endAction(row) {
        this.$confirm('券活动结束后，顾客已领取优惠券在有效时间内仍然可以使用，但不能再领取。', '提示', {
          confirmButtonText: '确认结束',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          endAction(row).then(response => {
            if (response.isError) return
            this.$message({
              message: '成功！',
              type: 'success'
            })
            this.init()
          })
        }).catch(() => {})
      },
      deleteAction(action) {
        deleteAction(action.actionId).then(response => {
          if (response.isError) return
          this.$message({
            message: '删除成功！',
            type: 'success'
          })
          this.init()
        })
      }
    }
  }

</script>
